<template>
  <div>
    <span class="tip">请上传用户要求替换结果材料的证明文件：聊天截图或替换说明单，并在下方文本框中详细说明xxxx时间xxxx机构xxx用户，通过xxxx方式要求运维人员：xxx替换已经结案项目的结果材料！</span>
    <div class="suspend">
      <div>
        <span>操作人员</span>
        <a-input size="large" type="text" placeholder="操作人员" v-model="operator"/>
      </div>
      <div style="height: auto">
        <span>替换说明</span>
        <a-textarea class="f16"  v-model="replaceInfo" placeholder="请输入替换说明" :rows="4"></a-textarea>
      </div>
      <div>
        <span>证明文件</span>
        <a-input :disabled="true"  size="large" type="text" placeholder="证明文件" v-model="replaceFileName"/>
        <a-upload
          name="file"
          :multiple="true"
          :custom-request="customRequest"
          action=""
          :show-upload-list="false"
          @change="handleChange"
        >
          <a-icon type="upload" style="width: 2em" class="cursor-pointer text-green" @click="uploadClick()" />
        </a-upload>
      </div>
      <div v-if="type === 'upload'">
        <span>替换文件</span>
        <a-input :disabled="true" size="large" type="text" placeholder="替换文件" v-model="fileNameList"/>
        <a-upload
          name="file"
          :multiple="true"
          :custom-request="uploadReplaceMaterials"
          action=""
          :show-upload-list="false"
          @change="handleChange"
        >
          <a-icon type="upload" class="cursor-pointer text-green" style="width: 2em" @click="uploadClick()" />
        </a-upload>
      </div>
    </div>
  </div>
</template>

<script>
import interfaceMonitorService from '@/api/interfaceMonitorService'
export default {
  name: "ReplaceMaterialsDialog",
  props: {
    type:String,
    projectId:Number,
    directoryInstId:Number,
    materialFileId:Number
  },
  data () {
    return {
      loading:false,
      fileList: [],
      replaceInfo:"",
      operator:"",
      replaceMaterialProof:null,
      replaceFileName:"",
      fileNameList:""
    }
  },

  methods: {
    validate () {
        let arr = []
        if (this.operator.trim() === '') {
          arr.push("替换人员")
        }
        if (this.replaceInfo.trim() === '') {
          arr.push("替换说明")
        }
        if (this.replaceMaterialProof === null) {
          arr.push("证明文件")
        }
      if (this.type === 'upload' && this.fileList === []) {
        arr.push("替换文件")
      }
        return arr.toString()
    },
    customRequest (context) {
      if(context.file.size === 0){
        this.$message.error('该文件内容为空，请上传正确文件!');
        return;
      }
      const fileType = context.file.type.toLowerCase().substring(context.file.type.indexOf('/') + 1)
      if (!['jpg', 'jpeg', 'png', 'bmp', 'gif','pdf'].includes(fileType)) {
        this.$message.error('当前仅支持图片和pdf，请上传正确文件!');
        return;
      }
      this.replaceMaterialProof = context.file
      this.replaceFileName = context.file.name
    },
    uploadReplaceMaterials (context) {
      if(context.file.size === 0){
        this.$message.error('该文件内容为空，请上传正确文件!');
        return;
      }
      this.fileList.push(context.file)
      if (this.fileNameList.length > 0) {
        this.fileNameList = this.fileNameList + ',' + context.file.name;
      } else {
        this.fileNameList = this.fileNameList + context.file.name;
      }
    },
    async replaceMaterials(){
      if (this.loading) return
      let msg = this.validate()
      if (msg) {
        this.$message.warn(msg + " 未填写！")
        return
      }
      this.loading = true
      const _data = new FormData()
      _data.append('projectId', this.projectId)
      _data.append('directoryInstId', this.directoryInstId)
      _data.append('replaceInfo', this.replaceInfo)
      _data.append('replaceMaterialProofFile', this.replaceMaterialProof)
      _data.append('operator', this.operator)
      if (this.type === 'delete') {
        _data.append('replaceMaterialsIds', this.materialFileId)
        return await interfaceMonitorService.deleteProjectMaterialFile(_data)
      } else if (this.type === 'upload') {
        this.fileList.forEach(file => {
          _data.append('file', file);
        })
        return await interfaceMonitorService.uploadProjectMaterials(_data)
      }
    },
    uploadClick (row) {
    },
    deleteMaterial(record) {
      this.fileList = this.fileList.filter(file => file !== record);
    },
    handleChange (info) {
      if (info.file.status !== 'uploading') {
        //  console.log(info.file, info.fileList)
      }
      if (info.file.status === 'done') {
        this.$emit('uploadSuccess', info.file)
        this.$message.success(`${info.file.name} 上传成功`)
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} 上传失败`)
      }
    },
  }
}
</script>

<style scoped lang="less">
.suspend {
  overflow: scroll;
  height: 100%;
  display: inline-block;
  width: 100%;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: 'gqlx gqts' 'pzr pzsj' 'gqnr gqnr' 'gqyy gqyy';
  justify-content: center;
  justify-items: start;
  align-items: center;
  gap: 20px 10px;

  .tip {
    color: rgb(235, 118, 83);
    padding-left: 7px;
    letter-spacing: 1px;
  }

  > div {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    margin: 20px 0px;

    span:nth-of-type(1) {
      width: 80px;
      display: table;
      text-align: right;
      padding-right: 10px;
      font-size: 16px;
      font-weight: 600;
    }

    i {
      font-style: normal;
      font-size: 13px;
      font-weight: 500;
      display: block;
      width: 100%;
      text-align: center;
      line-height: 13px;
    }

    &:nth-of-type(1) {
      grid-area: gqlx;
      height: 45px;

      > :nth-child(2) {
        width: 80%;
      }
    }

    &:nth-of-type(2) {
      grid-area: gqts;
      height: 45px;
      /*justify-content: flex-end;*/

      > :nth-child(2) {
        width: 80%;
      }
    }

    &:nth-of-type(3) {
      grid-area: pzr;
      height: 45px;

      > :nth-child(2) {
        width: 80%;
      }
    }

    &:nth-of-type(4) {
      grid-area: pzsj;
      height: 45px;
      justify-content: flex-end;

      > :nth-child(2) {
        width: 80%;
      }
    }

    &:nth-of-type(5) {
      grid-area: gqnr;
    }

    &:nth-of-type(6) {
      grid-area: gqyy;
    }
    textarea{
      min-height: 106px;
      max-height: 250px;
    }
  }

}

.btn-box {
  display: flex;
  justify-content: center;
  align-items: center;
}

/deep/ .ant-select-selection__placeholder{
  display: unset;
}

</style>